<template>
  <div class="personal-container">
    <!-- 顶部个人信息区域 -->
    <div class="profile-header">
      <div class="avatar-container">
        <div class="avatar">{{ userInfo.username.charAt(0).toUpperCase() }}</div>
      </div>
      <div class="user-info">
        <div class="username">{{ userInfo.username }} 
          <span class="google-id">google_{{ userInfo.googleId }}</span>
          <span class="id-tag">ID {{ userInfo.id }}</span>
        </div>
        <div class="user-tags">
          <span class="tag"><i class="fas fa-user"></i> 用户</span>
          <span class="tag default"><i class="fas fa-check-circle"></i> 默认(DEFAULT)</span>
          <span class="tag group"><i class="fas fa-users"></i> 分组(组1)</span>
          <span class="tag api"><i class="fas fa-key"></i> 无接口权限</span>
        </div>
      </div>
    </div>

    <!-- 用户信息和操作区域 -->
    <div class="user-info-actions">
      <!-- 左侧统计信息 -->
      <div class="stats-section">
        <!-- 用户统计信息 -->
        <div class="user-stats">
          <div class="stat-item">
            <div class="stat-value">${{ userInfo.balance }}</div>
            <div class="stat-label">当前余额</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">${{ userInfo.spent }}</div>
            <div class="stat-label">累计消费</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.invites }}</div>
            <div class="stat-label">总邀请数</div>
          </div>
        </div>

        <!-- 账号关联信息 -->
        <div class="account-links">
          <h3>账号关联</h3>
          <p class="account-note">您可以使用以下方式登录(Number=对应已绑定)</p>

          <div class="link-item">
            <div class="link-icon email-icon">
              <i class="fas fa-envelope"></i>
            </div>
            <div class="link-info">
              <div class="link-title">邮箱</div>
              <div class="link-value">{{ userInfo.email }}</div>
            </div>
            <div class="link-action">
              <button class="action-btn">绑定</button>
            </div>
          </div>

          <div class="link-item">
            <div class="link-icon github-icon">
              <i class="fab fa-github"></i>
            </div>
            <div class="link-info">
              <div class="link-title">GitHub</div>
              <div class="link-value">未绑定</div>
            </div>
            <div class="link-action">
              <button class="action-btn">绑定</button>
            </div>
          </div>

          <div class="link-item">
            <div class="link-icon google-icon">
              <i class="fab fa-google"></i>
            </div>
            <div class="link-info">
              <div class="link-title">Google</div>
              <div class="link-value">{{ userInfo.googleId }}</div>
            </div>
            <div class="link-action">
              <button class="action-btn">绑定</button>
            </div>
          </div>

          <div class="link-item">
            <div class="link-icon oidc-icon">
              <i class="fas fa-id-card"></i>
            </div>
            <div class="link-info">
              <div class="link-title">OIDC</div>
              <div class="link-value">未绑定</div>
            </div>
            <div class="link-action">
              <button class="action-btn">未启用</button>
            </div>
          </div>

          <div class="link-item">
            <div class="link-icon wechat-icon">
              <i class="fab fa-weixin"></i>
            </div>
            <div class="link-info">
              <div class="link-title">微信</div>
              <div class="link-value">未绑定</div>
            </div>
            <div class="link-action">
              <button class="action-btn">未启用</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧标签页内容 -->
      <div class="tabs-section">
        <!-- 标签切换区域 -->
        <div class="tab-container">
          <div class="tab-header">
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'favorites' }" 
              @click="activeTab = 'favorites'"
            >
              <i class="fas fa-star"></i> 收藏攻略
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'published' }" 
              @click="activeTab = 'published'"
            >
              <i class="fas fa-paper-plane"></i> 我发布的
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'profile' }" 
              @click="activeTab = 'profile'"
            >
              <i class="fas fa-user-edit"></i> 修改资料
            </div>
          </div>

          <!-- 收藏攻略内容 -->
          <div class="tab-content" v-if="activeTab === 'favorites'">
            <div class="favorites-info">
              <div class="empty-state" v-if="favorites.length === 0">
                <i class="fas fa-star empty-icon"></i>
                <p>您还没有收藏任何攻略</p>
              </div>
              <div class="favorites-list" v-else>
                <div class="favorite-item" v-for="(item, index) in favorites" :key="index">
                  <div class="favorite-image">
                    <img :src="item.image" alt="攻略图片">
                  </div>
                  <div class="favorite-content">
                    <h3 class="favorite-title">{{ item.title }}</h3>
                    <p class="favorite-desc">{{ item.description }}</p>
                    <div class="favorite-meta">
                      <span><i class="fas fa-user"></i> {{ item.author }}</span>
                      <span><i class="fas fa-calendar"></i> {{ item.date }}</span>
                      <span><i class="fas fa-eye"></i> {{ item.views }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 我发布的内容 -->
          <div class="tab-content" v-if="activeTab === 'published'">
            <div class="published-info">
              <div class="empty-state" v-if="published.length === 0">
                <i class="fas fa-paper-plane empty-icon"></i>
                <p>您还没有发布任何内容</p>
                <button class="publish-btn">立即发布</button>
              </div>
              <div class="published-list" v-else>
                <div class="published-item" v-for="(item, index) in published" :key="index">
                  <div class="published-image">
                    <img :src="item.image" alt="发布图片">
                  </div>
                  <div class="published-content">
                    <h3 class="published-title">{{ item.title }}</h3>
                    <p class="published-desc">{{ item.description }}</p>
                    <div class="published-meta">
                      <span><i class="fas fa-calendar"></i> {{ item.date }}</span>
                      <span><i class="fas fa-eye"></i> {{ item.views }}</span>
                      <span><i class="fas fa-comment"></i> {{ item.comments }}</span>
                    </div>
                  </div>
                  <div class="published-actions">
                    <button class="edit-btn"><i class="fas fa-edit"></i></button>
                    <button class="delete-btn"><i class="fas fa-trash"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 修改资料内容 -->
          <div class="tab-content" v-if="activeTab === 'profile'">
            <div class="profile-form">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" v-model="userInfo.displayName" placeholder="请输入用户名" class="information-input"/>
              </div>
              <div class="form-group">
                <label>昵称 <span class="required">*</span></label>
                <input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" class="information-input"/>
              </div>
              <div class="form-group">
                <label>密码 <span class="note">(可选填)</span></label>
                <input type="password" v-model="password" placeholder="密码长度 8 ~ 20位，可不填不修改" class="information-input"/>
                <div class="password-strength" v-if="password">
                  <div class="strength-bar" :style="{ width: passwordStrength + '%' }"></div>
                </div>
              </div>
              <div class="form-actions">
                <button class="save-btn" @click="saveProfile">保存修改</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 用户信息
const userInfo = ref({
  username: 'raffeenuxhymitz9052',
  id: '34534',
  balance: '0.29',
  spent: '0.01',
  invites: '1',
  email: 'raffeenuxhymitz9052@gmail.com',
  googleId: '10372503472185000418',
  displayName: 'google_12514',
  nickname: 'raffeenuxhymitz9052'
});

// 当前激活的标签 - 修改默认标签为收藏攻略
const activeTab = ref('favorites');

// 收藏的攻略列表
const favorites = ref([
  {
    title: '智能家居入门指南',
    description: '本攻略详细介绍了智能家居的基本概念和入门设置方法...',
    author: '智能家居专家',
    date: '2023-05-15',
    views: 1245,
    image: 'https://via.placeholder.com/150/1e1e2d/ffffff'
  },
  {
    title: 'AI语音助手完全配置',
    description: '从零开始配置你的AI语音助手，实现全屋智能控制...',
    author: 'AI达人',
    date: '2023-06-22',
    views: 986,
    image: 'https://via.placeholder.com/150/1e1e2d/ffffff'
  }
]);

// 已发布的内容列表
const published = ref([
  {
    title: '我的智能家居改造经验',
    description: '分享我将传统住宅改造为智能家居的全过程和经验总结...',
    date: '2023-07-10',
    views: 756,
    comments: 28,
    image: '/src/assets/img.png'
  }
]);

// 密码相关
const password = ref('');
const passwordStrength = computed(() => {
  if (!password.value) return 0;
  
  // 简单的密码强度计算
  let strength = 0;
  
  // 长度检查
  if (password.value.length >= 8) strength += 25;
  if (password.value.length >= 12) strength += 15;
  
  // 包含数字
  if (/\d/.test(password.value)) strength += 15;
  
  // 包含小写字母
  if (/[a-z]/.test(password.value)) strength += 15;
  
  // 包含大写字母
  if (/[A-Z]/.test(password.value)) strength += 15;
  
  // 包含特殊字符
  if (/[^A-Za-z0-9]/.test(password.value)) strength += 15;
  
  return Math.min(strength, 100);
});

// 保存个人资料
const saveProfile = () => {
  // 这里添加保存逻辑
  alert('个人资料已更新');
};
</script>

<style scoped>
.personal-container {
  max-width: 1000px;
  margin: 100px auto;
  padding: 20px;
  color: #e0e0e0;
  font-family: Arial, sans-serif;
  background-color: #121212;
  border-radius: 10px;
}

/* 顶部个人信息区域 */
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #1e1e2d;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-image: url('https://api.gpt.ge/assets/img/profile-lg.webp');
  background-size: cover;
  background-position: center;
}

.avatar-container {
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  background-color: #6c5ce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  color: white;
  border: 4px solid #ffffff;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.google-id, .id-tag {
  font-size: 14px;
  font-weight: normal;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #2d2d3a;
}

.user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  background-color: #2d2d3a;
  display: flex;
  align-items: center;
}

.tag i {
  margin-right: 5px;
}

.tag.default {
  background-color: #3498db;
}

.tag.group {
  background-color: #2ecc71;
}

.tag.api {
  background-color: #e74c3c;
}

/* 用户信息和操作区域 - 新增的两栏布局 */
.user-info-actions {
  display: flex;
  gap: 20px;
}

.stats-section {
  flex: 0 0 35%;
}

.tabs-section {
  flex: 0 0 65%;
}

/* 用户统计信息 */
.user-stats {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  background-color: #1e1e2d;
  border-radius: 10px;
  overflow: hidden;
}

.stat-item {
  padding: 15px;
  border-bottom: 1px solid #2d2d3a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
}

.stat-label {
  font-size: 14px;
  color: #8a8a9d;
}

/* 账号关联信息 */
.account-links {
  background-color: #1e1e2d;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
}

.account-links h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.account-note {
  font-size: 12px;
  color: #8a8a9d;
  margin-bottom: 20px;
}

.link-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #2d2d3a;
}

.link-item:last-child {
  border-bottom: none;
}

.link-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.email-icon {
  background-color: #e74c3c;
}

.github-icon {
  background-color: #333;
}

.google-icon {
  background-color: #4285f4;
}

.oidc-icon {
  background-color: #f39c12;
}

.wechat-icon {
  background-color: #1aad19;
}

.link-info {
  flex: 1;
}

.link-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.link-value {
  font-size: 14px;
  color: #8a8a9d;
}

.link-action {
  margin-left: 15px;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  background: linear-gradient(135deg, #6c5ce7, #8e44ad);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* 标签切换区域 */
.tab-container {
  background-color: #1e1e2d;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}

.tab-header {
  display: flex;
  background-color: #2d2d3a;
}

.tab-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.tab-item i {
  margin-right: 8px;
}

.tab-item:hover {
  background-color: rgba(108, 92, 231, 0.1);
}

.tab-item.active {
  background: linear-gradient(135deg, #6c5ce7, #8e44ad);
  color: white;
}

.tab-content {
  padding: 20px;
}
/*标签切换区域的修改资料部分*/
.information-input{
  width: 90% !important;
}

/* 订阅管理内容 */
.subscription-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  background-color: #2d2d3a;
  padding: 15px;
  border-radius: 8px;
}

.info-label {
  font-size: 14px;
  margin-bottom: 10px;
  color: #8a8a9d;
}

.info-value {
  display: flex;
  align-items: center;
}

.info-value i {
  margin-right: 8px;
  color: #2ecc71;
}

.generate-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background: linear-gradient(135deg, #6c5ce7, #8e44ad);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.generate-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* 修改资料内容 */
.profile-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.required {
  color: #e74c3c;
}

.note {
  font-size: 12px;
  color: #8a8a9d;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #3f3f5f;
  background-color: #2d2d3a;
  color: white;
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: #6c5ce7;
}

.password-strength {
  height: 4px;
  background-color: #3f3f5f;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  background: linear-gradient(to right, #e74c3c, #f39c12, #2ecc71);
  transition: width 0.3s ease;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.save-btn {
  padding: 12px 30px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #6c5ce7, #8e44ad);
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(108, 92, 231, 0.3);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .user-info-actions {
    flex-direction: column;
  }
  
  .stats-section, .tabs-section {
    flex: 0 0 100%;
  }
  
  .subscription-info {
    grid-template-columns: 1fr;
  }
}

/* 收藏攻略和我发布的共用样式 */
.empty-state {
  text-align: center;
  padding: 40px 0;
}

.empty-icon {
  font-size: 48px;
  color: #3f3f5f;
  margin-bottom: 15px;
}

.empty-state p {
  color: #8a8a9d;
  margin-bottom: 20px;
}

.publish-btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #6c5ce7, #8e44ad);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publish-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* 收藏攻略样式 */
.favorites-list, .published-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.favorite-item, .published-item {
  display: flex;
  background-color: #2d2d3a;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.favorite-item:hover, .published-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.favorite-image, .published-image {
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.favorite-image img, .published-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-content, .published-content {
  flex: 1;
  padding: 15px;
}

.favorite-title, .published-title {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.favorite-desc, .published-desc {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #8a8a9d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.favorite-meta, .published-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #8a8a9d;
}

.favorite-meta span, .published-meta span {
  display: flex;
  align-items: center;
}

.favorite-meta i, .published-meta i {
  margin-right: 5px;
}

/* 我发布的特有样式 */
.published-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
  gap: 10px;
}

.edit-btn, .delete-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn {
  background-color: #3498db;
  color: white;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.edit-btn:hover, .delete-btn:hover {
  opacity: 0.9;
  transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .favorite-item, .published-item {
    flex-direction: column;
  }

  .favorite-image, .published-image {
    width: 100%;
    height: 180px;
  }

  .published-actions {
    flex-direction: row;
    padding: 10px 15px;
    justify-content: flex-end;
  }
}
</style>

